<template>
	<view>
		<view class="header">
			<view class="order-status">
				<view class="status-icon">
					<block v-if="detail.audit_status == 10">
						<image class="image"
							src="https://tianliyx.oss-cn-shanghai.aliyuncs.com/miniprogram/static/order/status/received.png"
							mode="aspectFit"></image>
					</block>
					<!-- 已取消/待取消 -->
					<block v-else>
						<image class="image"
							src="https://tianliyx.oss-cn-shanghai.aliyuncs.com/miniprogram/static/order/status/close.png"
							mode="aspectFit"></image>
					</block>
				</view>
				<view class="status-text">
					<text>{{ detail.status_name }}</text>
				</view>
			</view>
		</view>

		<view class="w100 detail_box">
			<view class="w100 mb20 goods_list">
				<view class="w100 item">
					<image :src="detail.goods_images" mode=""></image>
					<view class="fr item_msg">
						<view class="title">
							{{ detail.goods_name }}
						</view>
						<view class="props">
							{{ detail.goods_props && detail.goods_props.toString() }} ×{{ detail.total_num }}
						</view>
						<view class="w100 price">
							<view class="b_price">
								<text class="sub">￥</text><text>{{ detail.goods_price }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="w100 mb20 order_box">
				<view class="w100 order p10">
					<view class="fl f26">
						<text>订单编号</text>
					</view>
					<view class="fl ml30 red_text">
						<text class="red_text">{{ detail.order_no }}</text>
					</view>
				</view>
				<view class="w100 order p10">
					<view class="fl f26">
						<text>售后类型</text>
					</view>
					<view class="fl ml30">
						<text class="red_text">{{ detail.type_name }}</text>
					</view>
				</view>

				<view class="w100 order p10">
					<view class="fl f26">
						<text>售后理由</text>
					</view>
					<view class="fl ml30">
						<text class="red_text">{{ detail.apply_desc || '--' }}</text>
					</view>
				</view>



				<view class="w100 order p10">
					<view class="fl f26">
						<text>订单金额</text>
					</view>
					<view class="fl ml30">
						<text class="red_text">{{ detail.pay_price }}</text>
					</view>
				</view>
			</view>

			<view class="w100 mb20 order_box" v-if="detail.refund_img.length">
				<view class="w100 order p10">
					<view class="fl f26">
						<text>售后图片</text>
					</view>
				</view>

				<view class="w100 order p10">
					<view class="fl">
						<view class="info-item">
							<view class="item-content">
								<image v-for="(item, index) in detail.refund_img" :key="index" :src="item"
									:data-index="index" mode="aspectFill" @click="previewImg"></image>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="w100 mb20 order_box">
				<view class="w100 order p10">
					<view class="fl f26">
						<text>商家回复</text>
					</view>
					<view class="fl ml30 red_text">
						<text class="red_text">{{ detail.status_name }}</text>
					</view>
				</view>
				<view class="w100 order p10" v-if="detail.refund_money != 0">
					<view class="fl f26">
						<text>退款金额</text>
					</view>
					<view class="fl ml30">
						<text class="red_text">{{ detail.refund_money }}</text>
					</view>
				</view>

				<view class="w100 order p10" v-if="detail.audit_status == 20">
					<view class="fl f26">
						<text>拒绝理由</text>
					</view>
					<view class="fl ml30">
						<text class="red_text">{{ detail.refuse_desc || '--' }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import {
		COMMON
	} from "@/utils/commom.js"
	import {
		get_refund_detail
	} from "@/api/refund.js"


	const order_refund_id = ref(null);
	const detail = ref({
		refund_img: []
	});

	onLoad((option) => {
		order_refund_id.value = option.order_refund_id;
		get_detail(order_refund_id.value);
	})

	// 获取售后详情
	function get_detail(order_refund_id) {
		get_refund_detail(order_refund_id).then(res => {
			let data = res.data;
			detail.value = data;
		})
	}
	
	// 图片预览
	function previewImg(e) {
		let index = e.currentTarget.dataset.index,
			imgs = detail.value.refund_img;
		wx.previewImage({
			current: imgs[index],
			urls: imgs
		})
	}
</script>

<style lang="scss" scoped>
	@import '@/static/css/order.scss';


	.goods_operate {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 100;
		background-color: #fff;
		border-top: 1px solid #ccc;
		padding: 20rpx 30rpx 50rpx 30rpx;

		.btn-item {
			width: 200rpx;
			font-size: 30rpx;
			line-height: 70rpx;
		}
	}


	.item-content {
		flex: 1;
		align-items: center;
		font-size: 26rpx;
		color: #333;

		image {
			width: 120rpx;
			height: 120rpx;
			border-radius: 10px;
			margin-right: 20rpx;
			float: left;
		}
	}
</style>